<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <el-input v-model="form.template_name" class="w-40" placeholder="合同模板名称"></el-input>
        <VSelect v-model="form.contract_type" placeholder="合同类型" :options="options.contract_type" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VCascader v-model="form.update_user_id" placeholder="更新人" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <div class="v-group-item">更新时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/settings/contract/add" type="primary" @click="create(tableRef)"><i class="dk-iconfont icon-Plus" />添加</VButton>
        <VExport auth="/purchase/settings/contract/derive" mainKey="ct_id" url="/v1/purchase-config/contract-template/export" name="contract" :tableRef="tableRef"
          class="ml-auto" />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <Upload ref="uploadRef" :options="options" @success="query" />
    <Contract ref="contractRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'
import VXETable from 'vxe-table'
import Add from './components/Add.vue'
import Contract from './components/Contract'
import Upload from './components/Upload'
import { getOption } from '@/api/public'

const tableRef = ref()
const logRef = ref()
const uploadRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 新增
const addRef = ref()
const create = () => {
  addRef?.value.open()
}

// 模板
const contractRef = ref()

// 获取options
const options = ref({})
getOption({ type: 'contract_template' }).then(res => {
  options.value = res.data
})

const handleRow = (name, row, rowIndex) => {
  const { ct_id } = row
  const showLoading = () => {
    loadings[name + rowIndex] = true
  }
  const closeLoading = () => {
    loadings[name + rowIndex] = false
  }
  const handle = {
    download: async() => {
      showLoading()
      const blob = await api.downloadExcel({ct_id})
      VXETable.saveFile({ filename: row.template_name, type: 'xlsx', content: blob })
      closeLoading()
    },
  }
  handle[name]()
}

// 列表配置
const tableOptions = reactive({
  showOverflow: false,
  formConfig: {
    data: {
      audit_name: '',
      purchase_account_id: [],
      account_type: [],
      dateRange: { type: 'update_time', value: [], range: true },
    }
  },
  columns: [
    { type: 'seq', title: '编号', fixed: 'left', width: 60 },
    { field: 'template_name', title: '合同模板名称', minWidth: 260, slots: {
      default: ({row}) => <VText value={row.template_name} />
    } },
    { field: 'contract_type_name', title: '合同类型', minWidth: 100, slots: {
      default: ({row}) => <VText value={row.contract_type_name} />
    } },
    { field: 'doc_type_name', title: '单据类型', minWidth: 100, slots: {
      default: ({row}) => <VText value={row.doc_type_name} />
    } },
    { field: 'company_name', title: '公司主体', minWidth: 150, slots: {
      default: ({row}) => <VText value={row.company_name} />
    } },
    { field: 'warehouse_name', title: '对应仓库', minWidth: 100, slots: {
      default: ({row}) => <VText value={row.warehouse_name} />
    } },
    { field: 'update_user', title: '更新人', minWidth: 100, slots: {
      default: ({row}) => <VText value={row.update_user} />
    } },
    { field: 'update_time', title: '更新时间', minWidth: 170, slots: {
      default: ({row}) => <VText value={row.update_time} />
    } },
    {
      title: '操作', width: 200, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          const { ct_id } = row
          return [<div class='nm flex flex-wrap gap-x-2 gap-y-1'>
            <VButton auth="/purchase/settings/contract/edit" link type="primary" onClick={() => addRef?.value.open(ct_id)}>编辑</VButton>
            <VButton auth="/purchase/settings/contract/preview" link type="primary" onClick={() => contractRef?.value.open(row, { look: true })}>预览</VButton>
            <VButton auth="/purchase/settings/contract/edit_contract_template" link type="primary" onClick={() => contractRef?.value.open(row)}>编辑合同模板</VButton>
            <VButton auth="/purchase/settings/contract/logs" link type="primary" onClick={() => logRef?.value.open({ log_type: 'contract_template', ct_id })}>日志</VButton>
            <VButton auth="/purchase/settings/contract/upload" link type="primary" onClick={() => uploadRef?.value.open(ct_id)}>上传合同模板</VButton>
            <VButton auth="/purchase/settings/contract/download" loading={loadings.download} link type="primary" onClick={() => handleRow('download', row, rowIndex)}>下载合同模板</VButton>
          </div>]
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  